<template>
  <div class="all">
    <about @click.native="login" class="about" :background-color="['#42B983','skyblue']" 
    :name="info.username" imgUrl="assets/img/profile/header.png"></about>
    <item class="item" v-for="(value,index) in userInfo">
      <span class="left" slot="left">{{tags[index]}}</span>
      <span class="right" slot="right">
        <span v-show="!changeMode">{{value.value}}</span>
        <input v-model="value.value" v-show="changeMode" class="input" :value="value.value" :type="value.type"/>
      </span>
    </item>
    <div class="button">
      <input name="enter" type="button" value="修改" class="enter" @click="change">
      <input name="password" type="button" value="保存" @click="save" class="enter change">
    </div>
  </div>
</template>

<script>
  import item from "./infoItem.vue"
  import about from './infoBack.vue'
  import {changeUser} from 'network/profile/user.js'

  export default{
    name:'',
    data(){
      return {
        tags:["昵称","电话","邮箱","地址"],

        changeMode:false

       }
    },
    computed:{
      userInfo:{
        get(){
          return [
            {
              value:this.info.username,
              type:"text"
            },
            {
              value:this.info.tel,
              type:"hidden"
            },
            {
              value:this.info.email,
              type:"hidden"
            },
            {
              value:this.info.address,
              type:"text"
            },
          ]
        },
        set(){}
      }
    },
    props:{
      info:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    methods:{
      change(){
        this.changeMode=true
      },
      test(){

      },
      save(){
        this.changeMode=false
        let info={
          id:JSON.parse(window.sessionStorage.user).id,
          password:JSON.parse(window.sessionStorage.user).password,
          username:this.userInfo[0].value,
          tel:this.userInfo[1].value,
          email:this.userInfo[2].value,
          address:this.userInfo[3].value,
        }
        changeUser(info).then(res=>{
          if(res.data.result=="yes"){
            this.userInfo=res.data.user
            window.sessionStorage.setItem("user",JSON.stringify(info))
            this.$store.dispatch('initUser',JSON.stringify(info)).then(res=>console.log(res))
            this.$router.push("/profile")
          }
          else console.log('no');
        }).catch(e=>{
          console.log(e);
          this.test()
        })
      }
    },
    components:{
      item,about
    }
  }
</script>

<style scoped>
  .all{
    background-color: #bebebe;
    height: calc(100vh - 49px - 44px);
  }
  .left{
    margin-left: 20px;
  }
  .right{
    margin-left: 30px;
  }
  .about{
    height: 30vh;
    box-shadow:0 0 3px 2px rgba(127, 127, 127, 0.5);
  }
  .item{
    height: 6vh;
    width: 95%;
    margin: 10px auto;
    z-index: 10;
    background-color: whitesmoke;
    box-shadow:0 0 3px 2px rgba(127, 127, 127, 0.5);
    position: relative;
  }
  span{
    line-height: 38px;
  }
  .input{
  	border-top: none;
  	border-left: none;
  	border-right: none;
  	background: none;
  	display: block;
  	position: absolute;
  	top: 50%;
  	transform: translateY(-50%);
    width: 205px;
    right: 20px;
    color: #3e3e3e;
  }
  .button{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
  }
  .enter{
  	width: 40%;
  	height: 20%;
  	margin-top: 5%;
    padding: 10px 0;
  	background-color: #ff43dd;
  	color: white;
  	text-align: center;
  	font-size: 20px;
  	font-family: 黑体;
  	border: none;
  	border-radius:25px;
  	box-shadow:0 0 3px 2px rgba(127, 127, 127, 0.5);
  }
  .change{
    background-color: #b8c615;
  }
</style>
